<template>
	<div class="edit-slide popup">
		<el-form
			class="content"
			ref="form"
			label-width="100px"
			:rules="RULE_EDIT_SLIDECARD"
			:model="slideCard"
		>
			<h2 class="center">{{ type === 0 ? '添加新轮播图' : '修改轮播图' }}</h2>
			<el-form-item
				class="picture"
				label="图片地址"
				prop="pictureUrl"
			>
				<el-input
					placeholder="输入轮播图封面地址"
					v-model="slideCard.pictureUrl"
				/>
			</el-form-item>
			<el-form-item
				label="跳转类型"
				prop="linkType"
			>
				<el-radio-group v-model="slideCard.linkType">
					<el-radio :label="1">小程序内跳转</el-radio>
					<el-radio :label="2">外部跳转</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item
				label="跳转地址"
				prop="linkUrl"
			>
				<el-input
					placeholder="跳转地址"
					v-model="slideCard.linkUrl"
				/>
			</el-form-item>
			<el-form-item
				label="是否启用"
				prop="enabled"
			>
				<el-radio-group v-model="slideCard.enabled">
					<el-radio :label="true">启用</el-radio>
					<el-radio :label="false">禁用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item class="btns">
				<el-button
					class="sure"
					type="primary"
					plain
					@click="handleSure"
				>
					确认
				</el-button>
				<el-button
					class="cancel"
					type="info"
					@click="$emit('close')"
				>
					取消
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { postSlide, putSlide } from '@operation/api/system'
import { RULE_EDIT_SLIDECARD } from '@operation/constants/rule'
export default {
  props: {
    slideInfo: {
      type: Object,
      default: () => {}
    },
    type: {
      type: Number,
      default: 0, // 0新，1修改
    }
  },
  data() {
    const models = {
      0: {
        fun: postSlide,
        tip: '确认新增轮播图？',
        successMsg: '添加轮播图成功'
      },
      1: {
        fun: putSlide,
        tip: '确认修改该轮播图？',
        successMsg: '修改轮播图成功'
      },
    }

    return {
      RULE_EDIT_SLIDECARD,
      model: models[ this.type ],
      slideCard: {
        pictureUrl: '',
        linkType: 1,
        linkUrl: '',
        enabled: true,
      }
    }
  },
  created() {
    if (this.type === 1) {
      this.slideCard = { ...this.slideInfo }
      console.log(this.slideInfo)
    }
  },
  methods: {
    /**
     * 点击确认按键，先进行表单验证，然后根据type类型分别调用保存和修改API对比赛信息进行操作
     */
    handleSure() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$confirm(this.model.tip, async() => {
            try {
              this.$loading()

              await this.model.fun(this.slideCard)
              this.$emit('finish')
              this.$success(this.model.successMsg)
            } catch (err) { err }
            this.$hideLoading()
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.edit-slide {
  .content {
    width: 600px;

    h2 {
      margin-bottom: 10px;
      color: $blue;
    }

    .picture {
      i {
        margin-left: 20px;
        font-size: 2em;
        color: $blue;
        cursor: pointer;
      }

      .el-image {
        border: 1px solid var(--border1);
      }
    }

    .btns {
      .sure {
        width: 30%;
      }
    }
  }
}
</style>
